
<template>
    <van-nav-bar :title="route.meta.title" left-arrow @click-left="router.replace('/user')" fixed placeholder />
    <van-tabs v-model:active="active" sticky swipeable @click-tab="onClickTab" @change="onClickTab">
        <van-tab title="全部">
            <Suspense>
                <template #default>
                    <OrderList :orderList="orderList" ></OrderList>
                </template>
                <template #fallback>loading... </template>
            </Suspense>
        </van-tab>
        <van-tab title="待支付">
            <OrderList :orderList="orderList" ></OrderList>
        </van-tab>
        <van-tab title="代发货">
            <OrderList :orderList="orderList" ></OrderList>
        </van-tab>
        <van-tab title="待收货">
            <OrderList :orderList="orderList" ></OrderList>
        </van-tab>
        <van-tab title="待评价">
            <OrderList :orderList="orderList" ></OrderList>
        </van-tab>
    </van-tabs>
</template>
    
<script setup>
import { useRoute, useRouter } from 'vue-router';
import { getOrderList } from '@/api/order.js'
import { ref, onMounted } from 'vue';
import OrderList from '@/components/OrderList.vue'


const route = useRoute()
const router = useRouter();
let active = ref(0);
let orderList = ref([])
let isShow = ref(false)

let onClickTab = async () => {

    let res = await getOrderList({
        status: active.value,
        page: 1,
        limit: 100
    })
    orderList.value = res.data.list?.reverse?.() ?? [];

}
onMounted(async () => {
    let res = await getOrderList({
        status: active.value,
        page: 1,
        limit: 100
    })
    orderList.value = res.data.list?.reverse?.() ?? [];

})


</script>
    
<style  scoped></style>